<template>
  <el-input class="phone-verify-code-input" v-bind="$attrs" @change="elinput">
    <el-button style="cursor:pointer" slot="append" :disabled="buttonLock===true" @click="sendPhoneCode">

      <slot name="unlock" v-if="buttonLock===false">
        <span>获取验证码</span>
      </slot>

      <slot name="lock" :time="time" v-if="buttonLock===true">
        <span>重新发送（{{time}}）</span>
      </slot>
    </el-button>
  </el-input>
</template>

<script>
  export default {
    name: "ElPhoneVerifyCodeInput",
    data() {
      return {
        time: 0,
        buttonLock: false,
      }
    },
    props: [
      'lockText'
    ],
    methods: {
      elinput(value) {
        this.$emit('input', value);
      },
      sendPhoneCode() {
        this.$emit('sendCode', this.lock);
      },
      lock(time = 30) {
        this.time = time;
        this.buttonLock = true;
        let countdown = () => {
          this.time--;
          if (this.time <= 0) {
            this.buttonLock = false;
            clearInterval(countdownInterval);
          }
        };
        countdown.call(null);
        const countdownInterval = setInterval(countdown, 1000);

      }
    }
  }
</script>

<style scoped>

</style>
